<template>
  <div :class="{'hidden': !showIcon, 'inline': inline}">
    <el-upload
    :action="action"
    name="Filedata"
    :with-credentials="true"
    :before-upload="beforeUpdate"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :on-exceed="handleExceed"
    :file-list="fileList"
    v-bind="$attrs"
    ref="upload">
    <slot>
      <i class="el-icon-plus"></i>
    </slot>
  </el-upload>
  <viewer :images="images" ref="viewer"
    @inited="inited"
  >
    <img v-for="src in images" :src="src" :key="src" style="display: none;">
  </viewer>

  <!-- <v-snackbar
      v-model="snackbar"
      :timeout="timeout"
    >
      {{ text }}
  </v-snackbar> -->
  </div>
</template>
<script>
import { Upload as ElUpload } from 'element-ui'
  export default {
    name: 'Upload',
    components: {
      ElUpload
    },
    props: {
      files: {
        type: Array,
        default: () => {
          return []
        }
      },
      inline: [String, Boolean]
    },
    data() {
      return {
        action: process.env.VUE_APP_BASE_API + '/admin/system/file/upload',
        // dialogImageUrl: '',
        // dialogVisible: false,
        fileList: this.files,
        images: [],
        snackbar: false,
        timeout: 1500,
        text: ''
      };
    },
    watch: {
      files(value) {
        this.fileList = value || []
      }
    },
    computed: {
      showIcon() {
        if (this.$attrs.limit && this.fileList) {
          return this.fileList.length < this.$attrs.limit
        }
        return true
      }
    },
    methods: {
      inited (viewer) {
        this.$viewer = viewer
      },
      showViewer() {
        this.$viewer.show()
      },
      setFiles(fileList) {
        let list = fileList.map(item => {
          if (item.response) {
            return item.response.data
          } else {
            return item
          }
        })
        this.$emit('update:files', list)
      },
      handleRemove(file, fileList) {
        this.fileList = fileList
        this.setFiles(fileList)
      },
      handlePictureCardPreview(file) {
        this.images = [file.url]
        // this.dialogImageUrl = file.url;
        // this.dialogVisible = true;
        this.showViewer()
      },
      handleSuccess(response, file, fileList) {
        this.fileList = fileList
        this.setFiles(fileList)
        this.$emit('success', {response, file, fileList})
      },
      handleError(err, file, fileList) {
        this.snackbar = true
        this.text = '文件上传失败'
        // this.$message({
        //   message: err,
        //   type: 'error'
        // })
      },
      beforeUpdate(file) {
        if (file.size > this.$config.uploadFileMaxSize) {
          this.$notify({
            title: 'error',
            message: `${file.name}文件过大`,
            type: 'warning'
          })
          return false
        }
      },
      handleExceed(files) {
        this.$notify({
          title: 'error',
          message: `最多能上传${this.$attrs.limit}张图片`,
          type: 'warning'
        })
      }
    }
  }
</script>
<style>
  .hidden .el-upload {
    display: none !important;
  }
  .inline {
    display: inline-block;
  }
</style>
